<template>
	<view class="mine">
		<view class="mine-content" v-if="isLogin">
			<view class="user_box">
				<view class="head_box">
					<u-avatar v-if="avatar" :src="avatar" size="150rpx" mode="scaleToFill" default-url></u-avatar>
					<view class="default_avatar"></view>
				</view>
				<view class="user_message">
					<view v-if="!isLogin" @click="login">请点击登录</view>
					<view v-else>{{ userInfo.nick_name }}</view>
				</view>
				<view class="setting" v-show="isLogin" @click="openSetting">设置</view>
			</view>

			<view class="user_collection" v-if="isLogin">
				<view class="folder-loading" v-if="folderList.length <= 0 && loading">
					<u-loading-icon></u-loading-icon>
				</view>

				<view class="folder" v-for="folder in folderList" :key="folder.id">
					<view @click="goPage(folder)">
						<view class="null" v-if="folder.amount && folder.cover_path">
							<view class="left">
								<image
									v-if="folder.amount >= 1"
									style="width: 100%;"
									:src="getAssetUrl(folder.cover_path[0])"
									mode="widthFix"
								></image>
							</view>

							<view class="right">
								<view class="image" style="border-bottom: 1px solid #fff;">
									<image
										style="width: 100%;"
										v-if="folder.amount >= 2"
										:src="getAssetUrl(folder.cover_path[1])"
										mode="widthFix"
									></image>
								</view>
								<view class="image">
									<image
										style="width: 100%;"
										v-if="folder.amount >= 3"
										:src="getAssetUrl(folder.cover_path[2])"
										mode="widthFix"
									></image>
								</view>
							</view>
						</view>
						<view v-else class="null">
							<view class="left"></view>
							<view class="right">
								<view style="width: 100%; height: 50%; border-bottom: 1px solid #fff;"></view>
								<view style="width: 100%; height: 50%;"></view>
							</view>
						</view>
					</view>
					<view class="collname">
						<view style="letter-spacing: 2rpx;">{{ folder.name }}</view>
						<text class="amount">{{ folder.amount }} photos</text>
					</view>
				</view>
			</view>

			<view class="version">{{ version }}</view>

			<!-- <view class="btn_exit" v-if="isLogin">
			<u-button type="primary" text="退出登录" @click="logout"></u-button>
			</view> -->
		</view>

		<!-- <view class="not_login" v-if="!isLogin">
			<image style="width: 100%;" src="../../static/pic@2x.png" mode="widthFix"></image>
			<view class="btn_login"><button class="btn" plain @click="login">登录</button></view>
		</view> -->
		<login v-if="!isLogin" isComponent />
	</view>
</template>

<script>
import api from '@/common/api.js';
import login from '@/pages/loginWays/loginWays.vue';
export default {
	components: {
		login
	},
	data() {
		return {
			avatar: '',
			folderList: [],
			loading: false,
			version: ''
		};
	},
	onLoad(option) {
		this.version = this.$version;
		if (this.userInfo.avatar) {
			if (this.userInfo.avatar.includes('https')) {
				this.avatar = this.userInfo.avatar;
			} else {
				this.avatar = this.$baseURL + this.userInfo.avatar;
			}
		}
		this.folderList = [];
		this.getAllFolder();
	},
	onShow() {
		// this.isLogin = uni.getStorageSync('access_token') ? true : false;
	},
	onPullDownRefresh() {
		// this.avatar = this.userInfo.avatar ? this.$baseURL + this.userInfo.avatar : '';
		if (this.userInfo.avatar) {
			if (this.userInfo.avatar.includes('https')) {
				this.avatar = this.userInfo.avatar;
			} else {
				this.avatar = this.$baseURL + this.userInfo.avatar;
			}
		}
		if (this.isLogin) {
			this.folderList = [];
			this.getAllFolder();
		} else {
			uni.stopPullDownRefresh();
		}
	},
	computed: {
		isLogin() {
			return this.$store.state.isLogin;
		},
		userInfo() {
			return this.$store.state.userinfo;
		}
	},
	watch: {
		isLogin: {
			handler(val) {
				console.log('登录状态改变');
				if (val) {
					// this.avatar = this.userInfo.avatar ? this.$baseURL + this.userInfo.avatar : '';
					if (this.userInfo.avatar) {
						if (this.userInfo.avatar.includes('https')) {
							this.avatar = this.userInfo.avatar;
						} else {
							this.avatar = this.$baseURL + this.userInfo.avatar;
						}
					}
					this.folderList = [];
					this.getAllFolder();
				} else {
					this.avatar = '';
					this.folderList = [];
				}
			}
		}
	},
	methods: {
		// 退出登录
		// async logout() {
		// 	let tokenString = uni.getStorageSync('access_token');
		// 	// console.log('token ==>', tokenString);

		// 	try {
		// 		let res = await this.$ajax({
		// 			url: api.logout,
		// 			header: {
		// 				Authorization: 'Bearer ' + tokenString
		// 			}
		// 		});
		// 		console.log('退出登录 ==>', res);
		// 		if (res.statusCode == '202') {
		// 			uni.removeStorageSync('access_token');
		// 			uni.removeStorageSync('userinfo');
		// 			this.$store.commit('logout');
		// 			this.folderList = [];
		// 			this.avatar = '';
		// 			uni.showToast({
		// 				title: '已退出登录'
		// 			})
		// 		}
		// 		// uni.navigateTo({
		// 		// 	url: '../login/login'
		// 		// });
		// 	} catch (e) {
		// 		console.log(e);
		// 	}
		// },

		// 打开选择登录方式页
		login() {
			uni.navigateTo({
				url: '../loginWays/loginWays'
			});
		},

		// 获取全部收藏夹
		async getAllFolder() {
			let tokenString = uni.getStorageSync('access_token');
			if (!tokenString) {
				return false;
			}
			this.loading = true;
			try {
				let res = await this.$ajax.get({
					url: api.favoriteFolders,
					header: {
						Authorization: 'Bearer ' + tokenString
					}
				});
				// console.log('全部收藏夹res ==>', res);

				if (res.statusCode == 200) {
					let data = res.data.data;
					data.forEach(item => {
						if (item.cover_path) {
							item.cover_path = JSON.parse(item.cover_path);
						}
					});
					this.folderList = data;
					// console.log('folderList ==>', this.folderList);
					this.$store.commit('getAllFolder', data || []);
				}
				this.loading = false;
				// uni.stopPullDownRefresh();
			} catch (e) {
				this.loading = false;
				// uni.stopPullDownRefresh();
				console.log(e);
			}
		},

		// 获取图片地址
		getAssetUrl(url) {
			return this.$baseURL + url;
		},

		// 打开收藏夹
		goPage(folder) {
			uni.navigateTo({
				url: `../collections/collections?folderId=${folder.id}`
			});
		},

		// 打开设置
		openSetting() {
			uni.navigateTo({
				url: '../setting/index/index'
			});
		}
	}
};
</script>

<style lang="scss">
.mine {
	.user_box {
		position: relative;
		display: flex;
		align-items: center;
		height: 300rpx;
		background-color: #3c9cff;
	}

	.head_box {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		margin-left: 40rpx;
		border-radius: 50%;
		overflow: hidden;
		z-index: 10;
	}

	.default_avatar {
		width: 150rpx;
		height: 150rpx;
		background-color: #eee;
		border-radius: 50%;
	}

	.btn_exit {
		margin: 0 20rpx 40rpx;
	}

	.user_message {
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		margin-left: 40rpx;
	}

	.user_collection {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 40rpx 20rpx;
	}

	.folder {
		margin-bottom: 40rpx;
	}

	.user_collection .null {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		width: calc((100vw - 60rpx) / 2);
		height: 220rpx;
		background: #efefef;
		border-radius: 20rpx;
		overflow: hidden;
		// border: #efefef 1px solid;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		transition: all 0.1s ease-in-out;
		z-index: 10;
	}

	.left {
		width: 65%;
		height: 100%;
		border-right: 1px solid #fff;
		box-sizing: border-box;
		overflow: hidden;
	}
	.right {
		flex: 1;
		height: 100%;
		box-sizing: border-box;
	}
	.right .image {
		height: 50%;
		overflow: hidden;
	}
	.collname {
		padding-left: 16rpx;
	}
	.amount {
		font-size: 24rpx;
	}

	.folder-loading {
		width: 100%;
		height: 364rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.setting {
		position: absolute;
		right: 40rpx;
		top: 20rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 700;
	}

	.version {
		text-align: center;
		font-size: 28rpx;
		padding: 20rpx 0;
	}

	.not_login {
		padding: 32rpx 32rpx 0;
		.btn {
			height: 88rpx;
			line-height: 88rpx;
			background-color: #1890ff;
			color: #fff;
			border: 2rpx solid #1890ff;
			border-radius: 44rpx;
			font-size: 28rpx;
			font-weight: 700;
		}
	}
}
</style>
